<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    table tr th, table tr td {
        border-color: #000000;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
        line-height: 30px
    }

    table tr td input {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        text-align: center;
    }

    table tr td textarea {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        resize: none;
        overflow-y: hidden;
    }

    .changeCursorIco {
        cursor: pointer;
    }
    .select2{
        margin: 0;
    }

    /**select2 去边框 */
    .selection .select2-selection--single{
        border: none;
    }
    /**select2 下拉菜单中内容居中 */
    .select2-results__option{
        text-align: center;
    }
    /**select2 禁用背景色透明 */
    .select2-container--default.select2-container--disabled .select2-selection--single{
        background: transparent;
    }
    /**select2 去掉三角符 */
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        left: 50%;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0;
    }

    .selectBackgroundDefault{
        background: #D2D6DE!important;
        color:#333333!important;
    }
    .selectBackgroundSuccess{
        background: #00A65A;
        color:white;
    }
    .selectBackgroundWarning{
        background: #F39C12;
        color:white;
    }
</style>
<body class="hold-transition skin-yellow sidebar-mini">
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box" style="border: none;box-shadow: none;">
                <div class="box-body">
                    <div class="col-md-1"></div>
                    <div class="col-md-10" style="padding-top: 25px;">
                        <form id="dataForm">
                            <table width="100%" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td colspan="7"
                                        style="border-left: none;border-right: none;font-size: 20px;height: 35px">
                                        <B>其他类项目计划反馈</B>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 100px;">项目编号</td>
                                    <td style="width:200px;" th:text="${prodOrd.prodNo}"></td>
                                    <td style="width:200px;">项目名称</td>
                                    <td  colspan="2" th:text="${prodOrd.prodName}"></td>
                                    <td style="width:200px;">数量</td>
                                    <td style="width:400px;" th:text="${prodOrd.prodNum}" ></td>
                                </tr>
                                <tr>
                                    <td>安装地点</td>
                                    <td th:text="${prodOrd.insSite}"></td>
                                    <td>需方</td>
                                    <td th:text="${prodOrd.customer}" colspan="2"></td>
                                    <td>交货时间</td>
                                    <td th:text="${#dates.format(prodOrd.prodDelDat, 'yyyy-MM-dd')}" colspan="2"></td>
                                </tr>
                                <tr>
                                    <td colspan="7"
                                        style="border-left: none;border-right: none;font-size: 20px;height: 35px">
                                        <B>项目排产</B>
                                    </td>
                                </tr>
                                <tr>
                                    <td>序号</td>
                                    <td>任务名称</td>
                                    <td>计划开始时间</td>
                                    <td style="width:250px;">计划完成时间</td>
                                    <td style="width:250px;">所属部门</td>
                                    <td style="width:250px;">反馈状态</td>
                                    <td style="width:400px;">备注</td>
                                </tr>
                                <tr th:if="${prodPlaDetList.size() > 0 }" th:id="${item.prpdCod}" th:each="item:${prodPlaDetList}">
                                    <td th:text="${itemStat.count}"></td>
                                    <td>
                                        <input name="prpdNam" type="text" autocomplete="off"
                                               th:value="${item.prpdNam}" readonly="readonly"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaStaDat" type="text"
                                               readonly="readonly" th:value="${#dates.format(item.prpdPlaStaDat, 'yyyy-MM-dd')}"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaEndDat" type="text"
                                               readonly="readonly" th:value="${#dates.format(item.prpdPlaEndDat, 'yyyy-MM-dd')}"/>
                                    </td>
                                    <td>
                                        <select name="prpdDepId" class="select2 select2-hidden-accessible" disabled="disabled" style="background:#FFFFFF!important;position:absolute;width:100%;height:100%;">
                                            <option th:selected="${item.prpdDepId eq deptItem.id}"
                                                    th:value="${deptItem.id}" th:text="${deptItem.name}"
                                                    th:each="deptItem:${deptList}"></option>
                                        </select>
                                    </td>
                                    <td>
                                        <input name="prpdId" type="hidden" style="display: none" th:value="${item.prpdId}"/>
                                        <select th:if="${item.prpdRetSta}==1" style="outline: none;background: #D2D6DE!important;color:#333333!important;width:100%;height:40px;border: none;" name="prpdRetSta">
                                            <option selected="selected" value="1" style="background: #D2D6DE!important;color:#333333!important;">未开始</option>
                                            <option value="2" style="background: #F39C12!important;color:#FFFFFF!important;">执行中</option>
                                            <option value="3" style="background: #00A65A!important;color:#FFFFFF!important;">已完成</option>
                                        </select>
                                        <select th:if="${item.prpdRetSta}==2" style="outline: none;background: #F39C12!important;color:#FFFFFF!important;width:100%;height:40px;border: none;" name="prpdRetSta">
                                            <option value="1" style="background: #D2D6DE!important;color:#333333!important;">未开始</option>
                                            <option selected="selected" value="2" style="background: #F39C12!important;color:#FFFFFF!important;">执行中</option>
                                            <option value="3" style="background: #00A65A!important;color:#FFFFFF!important;">已完成</option>
                                        </select>
                                        <select th:if="${item.prpdRetSta}==3" style="outline: none;background: #00A65A!important;color:#FFFFFF!important;width:100%;height:40px;border: none;" name="prpdRetSta">
                                            <option value="1" style="background: #D2D6DE!important;color:#333333!important;">未开始</option>
                                            <option value="2" style="background: #F39C12!important;color:#FFFFFF!important;">执行中</option>
                                            <option selected="selected" value="3" style="background: #00A65A!important;color:#FFFFFF!important;">已完成</option>
                                        </select>
                                    </td>
                                    <td>
                                        <textarea readonly="readonly"  name="prpdRem" th:text="${#strings.defaultString(item.prpdRem,'')}" maxlength="255"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="col-md-1">
                        <button shiro:hasPermission="pro:otherRet:edit" th:if="${prodPlaDetList !=null && prodPlaDetList.size() > 0 }" id="btn_save" type="button" class="btn btn-success">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
$(function (){
    /**
     * @methodName:
     * @description: 状态改变事件
     * @param: null
     * @return：
     * @exception：
     * @author： 徐一贺
     * @date： 2021/3/26 8:49
     * @office: 智能控制设计科
     * @research institute： 智能控制设计所
     * @department： 机械设计院
     * @company: 辽宁忠旺机械设备制造有限公司
     * @group： 忠旺集团
     * @version: 1.0
     */
    $("#dataForm [name='prpdRetSta']").change(function (){
       if($(this).val()==='1'){
           $(this).attr("style","outline: none;background: #D2D6DE!important;color:#333333!important;width:100%;height:40px;border: none;")
       }else if($(this).val()==='2'){
           $(this).attr("style","outline: none;background: #F39C12!important;color:#FFFFFF!important;width:100%;height:40px;border: none;")
       }else if($(this).val()==='3'){
           $(this).attr("style","outline: none;background: #00A65A!important;color:#FFFFFF!important;width:100%;height:40px;border: none;")
       }
    })

    /**
     * @methodName:
     * @description: 保存
     * @param: null
     * @return：
     * @exception：
     * @author： 徐一贺
     * @date： 2021/3/26 8:49
     * @office: 智能控制设计科
     * @research institute： 智能控制设计所
     * @department： 机械设计院
     * @company: 辽宁忠旺机械设备制造有限公司
     * @group： 忠旺集团
     * @version: 1.0
     */
    $("#btn_save").on('click',function (){
        let dataArray = new Array();
        let dataModel = new Object();
        $.each($("#dataForm").serializeArray(), function (_, kv) {
            if (kv.name === 'prpdId') {
                if (kv.value != "") {
                    dataModel.prpdId = kv.value;
                } else {
                    dataModel.prpdId = null;
                }
            }
            if (kv.name === 'prpdRetSta') {
                if (kv.value != "") {
                    dataModel.prpdRetSta = kv.value;
                } else {
                    dataModel.prpdRetSta = null;
                }
                if (dataModel.prpdId != undefined) {
                    dataArray.push(dataModel);
                    dataModel = new Object();
                }
            }
        });
        if(dataArray.length > 0){
            js.post({
                url: ctx + 'task/saveCommonPlanRet',
                type: 'post',
                traditional: true,            // 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: {
                    commonPlanRetJson: JSON.stringify(dataArray)
                },
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        location.reload();
                    } else {
                        js.modal.warning(result.msg);
                    }
                },
                error: function () {
                    js.modal.fail();
                }
            });
        }else{
            js.modal.warning("无数据无法按保存！");
        }
    });
})
</script>
</body>
</html>